<template>
  <div id="changedialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :dialogTitle="dialogTitle"
      @closetextDialog="closetextDialog"
      @confirmbtn="confirmbtn"
      :dialogWidth="'750px'"
    >
      <div class="innerLoding">
        <el-row>
          <el-form
            :model="formData"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            size="small"
          >
            <el-row>
              <el-col :span="20">
                <el-form-item label="姓名：" prop="name">
                  <el-input
                    placeholder="请输入姓名"
                    style="width: 80%"
                    clearable
                    v-model="formData.name"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <!-- <el-form-item label="email：" prop="email">
                  <el-input
                    placeholder="请输入email"
                    style="width: 80%"
                    clearable
                    v-model="formData.email"
                  >
                  </el-input>
                </el-form-item> -->
                <el-form-item
                  :label="i == 0 ? 'email：' : ''"
                  v-for="(p, i) in formData.emailarr"
                  :prop="'emailarr.' + i"
                  :key="i"
                >
                  <el-input
                    placeholder="请输入email"
                    style="width: 80%"
                    clearable
                    v-model="formData.emailarr[i]"
                  >
                  </el-input>
                  <span
                    v-if="i == 0"
                    class="el-icon-circle-plus"
                    style="font-size: 20px; color: #1bbc9b; margin-left: 10px"
                    @click="addmoreEmail"
                  ></span>
                  <span
                    v-if="i > 0"
                    class="el-icon-remove"
                    style="font-size: 20px; color: #ff4949; margin-left: 10px"
                    @click="removeEmail(i)"
                  ></span>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item
                  :label="i == 0 ? '微信：' : ''"
                  v-for="(p, i) in formData.wechatarr"
                  :prop="'wechatarr.' + i"
                  :key="i"
                >
                  <el-input
                    placeholder="请输入微信号"
                    style="width: 80%"
                    clearable
                    v-model="formData.wechatarr[i]"
                  >
                  </el-input>
                  <span
                    v-if="i == 0"
                    class="el-icon-circle-plus"
                    style="font-size: 20px; color: #1bbc9b; margin-left: 10px"
                    @click="addmoreWechat"
                  ></span>
                  <span
                    v-if="i > 0"
                    class="el-icon-remove"
                    style="font-size: 20px; color: #ff4949; margin-left: 10px"
                    @click="removeWechat(i)"
                  ></span>
                </el-form-item>
                <!-- <el-form-item label="微信：" prop="wechat">
                  <el-input
                    placeholder="请输入微信号"
                    style="width: 80%"
                    clearable
                    v-model="formData.wechat"
                  >
                  </el-input>
                </el-form-item> -->
              </el-col>
              <el-col :span="20">
                <el-form-item label="电话：" prop="tel">
                  <el-input
                    placeholder="请输入电话"
                    style="width: 80%"
                    clearable
                    v-model="formData.tel"
                  >
                  </el-input>
                  <span
                    class="el-icon-circle-plus"
                    style="font-size: 20px; color: #1bbc9b; margin-left: 10px"
                    @click="addmoreTel"
                  ></span>
                </el-form-item>
              </el-col>
              <div v-for="(p, i) in more_pointArr" :key="i">
                <el-col :span="20">
                  <el-form-item prop="more_pointArrdata">
                    <el-input
                      v-model="more_pointArr[i].tel"
                      clearable
                      placeholder="请输入电话"
                      style="width: 80%"
                    >
                    </el-input>
                    <span
                      class="el-icon-remove"
                      style="font-size: 20px; color: #ff4949; margin-left: 10px"
                      @click="removeTel(i)"
                    ></span>
                  </el-form-item>
                </el-col>
              </div>
            </el-row>
          </el-form>
        </el-row>
      </div>
    </commonformdialog>
  </div>
</template>

<script type="text/javascript">
//引入弹窗
import commonformdialog from "@/components/commondialog/commondialog";

import { contactsCreate, contactsUpdate } from "@/api/contacts";
export default {
  data() {
    return {
      showPicker: false,
      multipleopen: true,
      cityoptionsc: [],
      cityoptionMd: [],
      num: 0,
      more_pointArr: [],
      formData: {
        name: "",
        tel: "",
        wechat: "",
        email: "",
        wechatarr: [],
        emailarr: [],
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      },
      isshowDialogMAP: false,
      dialogTitleMAP: "选择地址",
      mapData: {},
      selecte: true,
    };
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: "",
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },

    dialogdata: {
      type: Object,
    },
  },
  components: {
    commonformdialog,
  },
  methods: {
    closetextDialog() {
      this.$emit("closedialog");
    },
    confirmbtn() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (!valid) return;
        let { tel, name } = { ...this.formData };
        let params = { tel, name };
        if (this.more_pointArr.length > 0) {
          this.more_pointArr.forEach((p) => {
            params.tel += "," + p.tel;
          });
        }

        params.email = this.formData.emailarr.join(",");
        params.wechat = this.formData.wechatarr.join(",");

        let data;
        if (this.formType == 0) {
          data = await contactsCreate(params);
        } else {
          params.id = this.formData.id;
          data = await contactsUpdate(params);
        }
        if (data.code == "0000") {
          this.$message({
            type: "success",
            message: data.msg,
          });
          this.$emit("confirm");
        }
      });
    },
    addmoreTel() {
      this.more_pointArr.push({ tel: "" });
    },
    removeTel(i) {
      this.more_pointArr.splice(i, 1);
    },
    addmoreEmail() {
      let newArr = this.formData.emailarr.concat([]);
      newArr.push("");
      let formData = { ...this.formData };
      formData.emailarr = newArr;
      this.formData = formData;
    },
    removeEmail(i) {
      let newArr = this.formData.emailarr.concat([]);
      newArr.splice(i, 1);
      let formData = { ...this.formData };
      formData.emailarr = newArr;
      this.formData = formData;
    },
    addmoreWechat() {
      let newArr = this.formData.wechatarr.concat([]);
      newArr.push("");
      let formData = { ...this.formData };
      formData.wechatarr = newArr;
      this.formData = formData;
    },
    removeWechat(i) {
      let newArr = this.formData.wechatarr.concat([]);
      newArr.splice(i, 1);
      let formData = { ...this.formData };
      formData.wechatarr = newArr;
      this.formData = formData;
    },
  },
  watch: {
    isshowDialog: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
      } else {
        this.more_pointArr = [];
        this.formData.wechatarr = [""];
        this.formData.emailarr = [""];
      }
    },
    dialogdata: function (val) {
      this.formData = val;
      let arr = [];
      let wechatarr = [];
      let emailarr = [];
      let formData = { ...this.formData };
      if (this.formData.tel.indexOf(",") != -1) {
        arr = this.formData.tel.split(",");
      } else {
        arr.push(this.formData.tel);
      }

      if (!formData.wechat) {
        wechatarr.push("");
        formData.wechatarr = wechatarr;
      } else {
        formData.wechatarr = formData.wechat.split(",");
      }
      if (!formData.email) {
        emailarr.push("");
        formData.emailarr = emailarr;
      } else {
        formData.emailarr = formData.emailarr.split(",");
      }

      if (arr.length == 1) {
        formData.tel = arr[0];
        this.more_pointArr = [];
      } else if (arr.length > 1) {
        formData.tel = arr[0];
        arr.splice(0, 1);
        arr.forEach((p) => {
          this.more_pointArr.push({ tel: p });
        });
      }
      this.formData = formData;
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  #InputSearch {
    display: none !important;
  }
  .grid-emojis {
    grid-template-columns: repeat(10, 10%) !important;
  }
  .small {
    position: absolute;
    z-index: 9;
    left: -45px;
    top: 30px;
  }
  .cityoptionscItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
